<template>
  <div class="login">
    <div class="logo">
      <img src="../../assets/logo.19ca0be.png" />
    </div>
    <van-field
      v-model="tel"
      type="tel"
      label="手机号"
      placeholder="请输入手机号"
      :error-message="errormessage"
      @blur="prompt()"
    />
    <van-field
      v-model="sms"
      center
      clearable
      label="短信验证码"
      placeholder="请输入短信验证码"
    >
      <template #button>
        <van-button
          v-show="flag"
          size="small"
          type="primary"
          @click="getcode()"
        >
          {{ code }}
        </van-button>
        <van-button v-show="!flag" size="small" type="primary">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
            num
          }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </van-button>
      </template>
    </van-field>
    <van-button type="primary" block @click="login()">登录</van-button>
    <div class="hint">未注册的手机号将自动生成新账号</div>
    <span class="copyright">© 掌上电影 客服电话: <a>400-670-5335</a></span>
  </div>
</template>
<script>
import { getcode, namelogin } from "../../api/getlogin"
import { Notify, Toast } from "vant"

export default {
  data() {
    return {
      tel: "",
      sms: "",
      errormessage: "",
      getcodes: "",
      code: "发送验证码",
      num: 10,
      flag: "true",
      msg: ""
    }
  },
  methods: {
    prompt() {
      var tel = this.tel
      if (!/^1[3|4|5|7|8][0-9]{9}$/.test(tel)) {
        this.errormessage = "手机号输入错误(格式或者个数)"
      } else {
        this.errormessage = ""
      }
    },
    getcode() {
      var tel = this.tel
      if (!this.tel) {
        return
      } else if (!/^1[3|4|5|7|8][0-9]{9}$/.test(tel)) {
        return
      }
      getcode(this.tel).then((res) => {
        this.getcodes = res.data.data.verCode
        this.flag = false
        var timer = setInterval(() => {
          this.num--
          // eslint-disable-next-line eqeqeq
          if (this.num == 0) {
            clearInterval(timer)
            this.flag = true
            this.num = 10
          }
        }, 1000)
        // eslint-disable-next-line eqeqeq

        window.setTimeout(() => {
          Notify({
            type: "primary",
            duration: 3000,
            message: `【手机绑定】您正在登录掌上影院到此手机,验证码: ${res.data.data.verCode} ,两分钟有效期!`
          })
        }, 2000)
      })
    },
    login() {
      if (!this.sms) {
        Toast("请输入验证码")
        return
      }
      namelogin(this.tel, this.sms).then((res) => {
        console.log(res)
        if (res.data.code !== 200) {
          Toast("验证码输入错误")
        } else {
          Toast("登录成功")
          localStorage.user = JSON.stringify(res.data.data.user)
          console.log(res.data.data.user)
          this.$store.commit("user/setUser", res.data.data.user)
          this.$store.commit("user/login")
          // this.$router.push({ path: "/center" })
          this.$router.go(-1)
        }
      })
    }
  }
}
</script>
<style lang="scss">
.login {
  padding: 0 15px;
  .logo {
    margin: 79px auto 40px;
    text-align: center;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    img {
      height: 60px;
    }
  }
  .van-button {
    border-radius: 30px;
    transition: opacity;
  }
  .van-button--primary {
    background-color: #eceaea;
    border: 1px solid #eceaea;
    color: #999;
  }
  .hint {
    color: #999;
    font-size: 13px;
    text-align: center;
    margin-top: 10px;
  }
  .copyright {
    text-align: center;
    display: block;
    margin-top: 10px;
    font-size: 14px;
    a {
      color: #df2d2d;
    }
  }
}
.van-notify--primary {
  background: #646464;
  height: 60px;
}
</style>
